<template>
  <div class="app-container">
    <div class="box">
      <el-row>
        <el-col :span="24">
          <div class="grid-top">
            <el-image
              class="cover"
              style="width: 350px; height: 250px"
              :src="trainData?.cover"
              :fit="cover"
            />

            <div class="info">
              <h3>
                {{ trainData.name }}
              </h3>
              <p>
                <span class="icon-span"
                  ><el-icon :size="20"> <Timer /> </el-icon
                ></span>
                报名截止时间：{{ trainData.enrollEndTime }}
                <span class="status ing">进行中</span>
              </p>
              <p>
                <span class="icon-span"
                  ><el-icon :size="20"> <Calendar /> </el-icon
                ></span>
                比赛时间：{{ trainData.trainTimeStr }}
              </p>
              <p>
                <span class="icon-span"
                  ><el-icon :size="20"> <Location /> </el-icon
                ></span>
                地点：{{ trainData.address }}
              </p>
              <p>
                <span class="icon-span"
                  ><el-icon :size="20"> <User /> </el-icon
                ></span>
                联系人：{{ trainData.contacts }}
              </p>

              <el-button v-if="false" type="info" round disabled
                >报名未开始</el-button
              >
              <br />
              <div v-if="trainData.progressStatusCode != 1">
                <el-button
                  v-if="
                    trainData.signStatusStr == '报名结束' &&
                    trainData.signStatus != 1 &&
                    trainData.signStatus != 0
                  "
                  type="info"
                  round
                  disabled
                  >报名已结束</el-button
                >

                <el-button
                  v-if="
                    trainData.signStatus != 0 &&
                    trainData.signStatus != 1 &&
                    trainData.signStatus != 5 &&
                    trainData.signStatusStr != '报名结束'
                  "
                  type="success"
                  round
                  @click="choseSignType(trainData)"
                  >我要报名</el-button
                >
                <el-button
                  v-if="
                    trainData.signStatus == 1 ||
                    trainData.signStatus == 0 ||
                    trainData.signStatus == 5
                  "
                  type="info"
                  round
                  disabled
                  >已报名</el-button
                >
              </div>

              <el-button
                v-if="trainData.progressStatusCode == 1"
                class="btnWei"
                round
                disabled
                >报名未开始</el-button
              >
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="18">
          <el-tabs
            v-model="activeName"
            class="match-tabs leftTabs"
            @tab-click="handleClick"
          >
            <el-tab-pane label="培训详情" name="tab1">
              <div class="gg">
                <h3>组委会</h3>
                <div class="pp">
                  <p>主办单位：{{ trainData.organizer || "暂无" }}</p>
                  <p>承办单位：{{ trainData.undertaker }}</p>
                  <p>联系电话：{{ trainData.contactUs }}</p>
                </div>
              </div>
              <div class="gg">
                <h3>报名须知</h3>
                <div class="pp">
                  <p>{{ trainData.enrollNotice }}</p>
                </div>
              </div>
              <div class="gg">
                <h3>培训项目</h3>
                <div class="pp">
                <el-table :data="trainList" style="width: 70%" border>
                  <el-table-column
                    prop="typeStr"
                    label="科目类型"
                    min-width="200"
                  />
                  <el-table-column
                    prop="projectName"
                    label="科目名称"
                    min-width="300"
                  />
                  <el-table-column prop="date" label="必报科目" min-width="200">
                    <template #default="props">
                      <div v-if="props.row.isNecessary == 1">是</div>
                      <div v-else>否</div>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="培训日程" name="third">
              <el-timeline>
                <div
                  v-for="s in trainData.scheduleList"
                  :key="s.id"
                  class="riBox"
                >
                  <div class="timer">
                    <el-icon>
                      <Clock />
                    </el-icon>
                    {{ s.startTime }}
                  </div>
                  <div class="content">
                    {{ s.event }}
                  </div>
                  <div class="address">
                    <el-icon>
                      <OfficeBuilding />
                    </el-icon>
                    {{ s.place }}
                  </div>
                </div>
              </el-timeline>

              <el-empty
                v-if="trainData.scheduleList?.length == 0"
                description="还没有日程"
              />
            </el-tab-pane>
            <el-tab-pane
              v-if="cptLabelsList?.length > 0"
              :label="cptLabelsList[0].customTitle"
              name="cptLabelsList[0].id"
            >
              <div class="richContent" v-html="cptLabelsList[0].customText" />
            </el-tab-pane>
            <el-tab-pane
              v-if="cptLabelsList?.length > 1"
              :label="cptLabelsList[1].customTitle"
              name="cptLabelsList[1].id"
            >
              <div class="richContent" v-html="cptLabelsList[1].customText" />
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="6">
          <el-tabs
            v-model="activeName2"
            class="match-tabs"
            @tab-click="handleClick"
          >
            <el-tab-pane label="报名倒计时" name="first">
              <van-count-down v-if="trainData.progressStatusCode == 1">
                <template #default="timeData">
                  <span class="block">{{ timeData.days }}</span>
                  <span class="colon">天</span>
                  <span class="block">{{ timeData.hours }}</span>
                  <span class="colon">时</span>
                  <span class="block">{{ timeData.minutes }}</span>
                  <span class="colon">分</span>
                  <span class="block">{{ timeData.seconds }}</span>
                  <span class="colon">秒</span>
                </template>
              </van-count-down>
              <div v-if="trainData.progressStatusCode == 2">
                <div class="red-center">报名进行中</div>
              </div>
              <div v-if="trainData.progressStatusCode > 2">
                <div class="red-center">报名已结束</div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, ref } from "vue";
import { reactive, onMounted } from "@vue/runtime-core";
import { useRoute, useRouter } from "vue-router";
import * as train from "@/api/train/pc";
import { toRefs } from "@vueuse/shared";
import { dayjs } from "element-plus";
console.log(dayjs);
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
const id = ref(route.query.id);
const activeName2 = ref("first");
const activeName = ref("tab1");
const time = ref();
const data = reactive({
  form: {},
  trainData: {},
  trainList: [],
});
const { form, trainData, trainList } = toRefs(data);

onMounted(() => {
  initData();
});

async function initData() {
  form.value.id = id.value;
  let res = await train.getTrainDetails(form.value);
  trainData.value = res.data;
  res.data.trainProjectsList?.forEach((item) => {
    item.typeStr = "培训";
    trainList.value.push(item);
  });
  res.data.examProjectsList?.forEach((item) => {
    item.typeStr = "考试";
    trainList.value.push(item);
  });

  let beginTime = dayjs(res.data.enrollStartTime).valueOf();
  let endTime = dayjs(res.data.enrollEndTime).valueOf();
  let nowTime = dayjs().valueOf();
  time.value = beginTime - nowTime;
  trainData.value.progressStatusCode = 1;
  if (time.value < 0) trainData.value.progressStatusCode = 2;
  if (endTime - nowTime < 0) trainData.value.progressStatusCode = 3;
}

function handleClick(tab, event) {
  // console.log(tab, event);
}

function choseSignType() {
  router.push({
    name: "trainSignStep1",
    query: { id: trainData.value.id },
  });
}
</script>

<style scoped lang="scss">
@import '@/assets/styles/variables.module.scss';
.btnWei {
  background: linear-gradient(270deg, #40d8ee, #53a7f6);
  color: #fff;
}
.app-container {
  padding: 0;
  background: #f5f7f9;
}
.riBox {
  padding: 14px 20px;
  margin-bottom: 23px;
  background-color: #fbfcfd;
  border-radius: 15px;
}

.timer {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: $--color-primary;
}

.icon-span {
  position: relative;
  top: 0.2rem;
}
.content {
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #2b3133;
  margin-top: 14px;
}
.address {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #7b7f83;
  margin-top: 14px;
}

.typeTag {
  border-radius: 0px 10px 0px 10px;
  padding: 2px 12px;
  background: #ff8124;
  font-size: 14px;
  color: #fff;
}
.status {
  border-radius: 8px;
  padding: 3px;
  font-size: 12px;
  margin-left: 30px;
}
.ing {
  border: 1px solid $--color-primary;
  color: $--color-primary;
}
.matchItem {
  cursor: pointer;
  margin-bottom: 40px;
  height: 180px;
  background: #ffffff;
  position: relative;
  border-radius: 10px;

  .el-avatar {
    position: absolute;
    left: 20px;
    top: 30px;
  }

  .info {
    padding: 12px 0 0 140px;

    p {
      font-size: 14px;
      margin-bottom: 10px;
    }
  }

  .typeTag {
    position: absolute;
    right: 0;
    top: 0;
  }

  h3 {
    font-weight: 500;
    font-size: 18px;
    color: #000000;
    text-overflow: ellipsis;
  }

  &:hover h3 {
    font-weight: bold;
  }
}

.el-pagination {
  justify-content: center;
  --el-pagination-bg-color: none;
}

.kind {
  background: #fff;
  margin: 0 0 30px;

  ul {
    list-style: none;
    padding: 30px 0 10px;

    li {
      margin: 0 0 20px;
      display: flex;
      align-items: center;
    }
  }
}

.listTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.match-tabs {
  background: #fff;
  padding: 10px 20px 20px;
}

.teamItem {
  height: 80px;
  background: #fbfcfd;
  border-radius: 10px;
  margin: 10px 0;
  display: flex;
  align-items: center;
  padding: 0 20px;
  overflow: hidden;
  text-overflow: ellipsis;

  .el-avatar {
    border: 1px solid #eeeeee;
  }

  .name {
    margin-left: 15px;
    flex: 1;
    font-size: 14px;
  }
}

.grid-top {
  background: #fff;
  padding: 28px;
  border-radius: 10px;
  margin: 30px auto;
  position: relative;
  height: 310px;

  .cover {
    width: 360px;
    height: 270px;
    aspect-ratio: 4/3;
    position: absolute;
    border-radius: 10px;
    background: #f8f8f8;
    object-fit: cover;
  }

  .info {
    padding-left: 390px;

    h3 {
      font-weight: 500;
      color: #000000;
      font-size: 20px;

      .typeTag {
        border-radius: 13px 13px 13px 0;
        margin-right: 10px;
      }
    }

    p {
      color: #7b7f83;
      font-size: 14px;
    }

    .el-button.el-button--success {
      background: linear-gradient(270deg, $--color-primary, $--color-danger);
      border: none;
    }
  }
}

.gg {
  margin: 0 0 28px;

  h3 {
    margin: 20px 0 8px;
    font-weight: bold;
    font-size: 16px;
    position: relative;
    padding-left:20px;
  }
  h3::before {
        position: absolute; /*绝对定位*/
        top: 50%; /*Y轴方向偏移自身高度的50%*/
        transform: translatey(-40%); /*Y轴方向偏移微调*/
        left:0; /*紧靠容器左边缘*/
        content: ''; /*伪元素需要有内容才能显示*/
        width: 3px; /*伪元素宽度*/
        height: 17px; /*伪元素高度*/
        background-color: $--color-primary; /*伪元素颜色*/

     }

  p {
    font-size: 14px;
    color: #4c5359;
    margin: 0;
    line-height: 24px;
  }
  .pp {
    margin:20px;
    padding:20px;
    border:1px solid $--color-primary;
  }
}

.van-count-down {
  text-align: center;
  margin: 20px 0;
}

.colon {
  display: inline-block;
  font-size: 16px;
  margin: 0 8px;
  color: #7b7f83;
}

.block {
  padding: 16px 0;
  display: inline-block;
  min-width: 50px;
  color: #e60012;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  border-radius: 10px;
  background-color: #fafbfc;
}

.time-address {
  font-size: 13px;
  margin: 6px 0 0;
  color: #999;
}
.popList .teamItem {
  cursor: pointer;
}
.popList .teamItem:hover {
  background: #e7e7e7;
}
.richContent img {
  max-width: 100%;
}
.red-center {
  font-size: 24px;
  text-align: center;
  font-family: DIN Alternate;
  padding: 30px 0;
  font-weight: bold;
  color: #e60012;
}
</style>
